<template>
  <div class="">
    <div class="system-message" :style="'background-color:' + backgroundColor + ' ;'" @click="toChatPage(to)">
      <el-image fit="cover">
        <template #error>
          <el-icon class="user-load-faild"> <UserFilled /> </el-icon>
        </template>
      </el-image>
        <div class="message-info">
            <div class="name">{{ name }}</div>
            <div class="last-message">{{ lastMessage }}</div>
        </div>
        <div class="timestamp">{{ timestamp }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UserFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();

defineProps<{
  img: String;
  name: String;
  lastMessage: String;
  timestamp: String;
  to?: String;
  backgroundColor?: String;
}>();

function toChatPage(to: String | undefined) {
  if (to != null && to != undefined) {
        router.push(to.toString());
    }
}
</script>

<style scoped>
.system-message {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
}
.system-message:hover {
  background-color: #f0f0f0;
}
.system-message el-image {
  border-radius: 50%;
  margin-right: 10px;
}
.system-message .user-load-faild {
  font-size: 30px;
  color: #c0c4cc;
  background-color: #e0e0e0;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  border: 1px solid #9a9a9a;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
.system-message .message-info {
  flex: 1;
}
.system-message .message-info .name {
  font-weight: bold;
  margin-bottom: 5px;
    font-size: 16px;
}
.system-message .message-info .last-message {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.system-message .timestamp {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
}
.system-message:hover .timestamp {
  color: #606266;
}
.system-message:hover .name {
  color: #0a4581;
}
</style>